<template>
  <div class="config-manager">
    <div class="config-manager-title">
      <span>工作空间</span>
      <b>随意切换：个人项目 | 公司项目 / pc | 移动端</b>
      <div>
        <span @click="popupConf.show = true">test popup</span>
        <span @click="popupDropConf.show = true">test drop</span>
        <span @click="messageConf.tip(new Date().getTime())">test message tip</span>
        <span @click="messageConf.warn(new Date().getTime())">test message warn</span>
        <span @click="noticeConf.tip({title: `456`, txt: new Date().getTime()})">test noticeConf tip</span>
      </div>
    </div>
    <PopUp :conf="popupConf">
      <PopUpInner :conf="popupConf" class="aaa">
        <Books :conf="popupConf">
          <li ref="li" :key="index" v-for="(dto, index) in popupConf.list">
            <div v-for="(item, index) in dto.list" :key="index">456</div>
          </li>
        </Books>
        <div slot="top"><input type="text"></div>
        <div slot="foot"><input type="text"></div>
      </PopUpInner>
    </PopUp>
    <PopUp :conf="popupDropConf">
      <PopUpInner :conf="popupDropConf">
        <div style="padding: 10px;">
          <Fold>
            <div><li>title</li><li>title</li></div>
            <div slot="content"><li>content</li><li>content</li><li>content</li><li>content</li><li>content</li><li>content</li><li>content</li><li>content</li></div>
          </Fold>
        </div>
        <Devider :txt="`45646456`"></Devider>
        <NumberInput></NumberInput>
        <Paging :conf="pagingConf"/>
        <Form>
          <FormItem v-for="(dropConf, index) in popupDropConf.list"  :key="index" :conf="dropConf">
            <Drop :conf="dropConf" v-if="dropConf.useComp === `drop`"></Drop>
            <CheckBox :conf="dropConf" v-if="dropConf.useComp === `checkbox`"></CheckBox>
            <Radio :conf="dropConf" v-if="dropConf.useComp === `radio`"></Radio>
            <DatePicker :conf="dropConf" v-if="dropConf.useComp === `datePicker`"></DatePicker>
          </FormItem>
        </Form>
      </PopUpInner>
    </PopUp>
    <PopUp :conf="msgConf">
      <PopUpInner :conf="msgConf">
        <MsgList :conf="msgConf"></MsgList>
      </PopUpInner>
    </PopUp>
    <ColorPicker></ColorPicker>
  </div>
</template>
<script>
import {parseObjToTree, parseTreeToObj, parseObjectToTreeTools} from "cdy-utils";
import PlatformTree from "../../units/PlatformTree";
import PlatPopup from "../../units/PlatPopup";
import MsgList from "../../units/MsgList";
import PopUp from "../../components/PopUp";
import PopUpInner from "../../components/PopUpInner";
import Books from "../../components/Books";
import Drop from "../../components/Drop";
import FormItem from "../../components/FormItem";
import CheckBox from "../../components/CheckBox";
import Radio from "../../components/Radio";
import Form from "../../components/Form";
import DatePicker from "../../components/DatePicker";
import Paging from "../../components/Paging";
import Messages from "../../components/Messages.js";
import Notice from "../../components/Notice.js";
import Fold from "../../components/Fold";
import Devider from "../../components/Devider";
import NumberInput from "../../components/NumberInput";
import ColorPicker from "../../components/ColorPicker";

export default {
  name: 'home',
  components: {
    PlatformTree, PlatPopup, PopUp, ColorPicker, PopUpInner, Books, Drop, FormItem, CheckBox, Radio, Form, DatePicker, Paging, Fold, Devider, NumberInput,
    MsgList
  },
  data() {
    return {
      noticeConf: new Notice(),
      messageConf: new Messages(),
      msgConf: {
        show: true,
        title: "消息列表",
        footBtn: [
          {name: "知道了", click: (hide, conf) => hide()}
        ],
        list: [
          {type: "err", msg: "出错了"},
          {type: "warn", msg: "警告了"},
          {type: "succ", msg: "成功了"},
        ],
      },
      pagingConf: {
        currentPageIndex: 0,
        maxPageNum: 10,
        total: 100,
      },
      popupConf: {
        show: false,
        title: "某弹窗",
        topBtns: [
          {name: "按钮1", click: () => {console.log("anniu1")}},
          {name: "按钮2", click: () => {console.log("anniu2")}},
          {name: "按钮3", click: () => {console.log("anniu3")}},
        ],
        noCloseBtn: false,
        subTitle: "some tanchaung",
        onConfirm: (hide, conf) => hide(),
        onCancle: (hide, conf) => hide(),
        footBtn: [
          {name: "按钮1", click: (hide, conf) => hide()},
          {name: "按钮2", click: (hide, conf) => hide()}
        ],
        list: [
          {name: "目录一", list: [0]},
          {name: "目录二", list: [0,0,]},
          {name: "目录三", list: [0,0,0,]},
          {name: "目录四", list: [0]},
          {name: "目录五", list: [0,0,]},
          {name: "目录六", list: [0,0,0,]},
        ],
      },
      popupDropConf: {
        show: false,
        title: "某弹窗",
        topBtns: [{name: "按钮1", click: (hide, conf) => hide()},],
        noCloseBtn: false,
        subTitle: "some tanchaung",
        onConfirm: (hide, conf) => hide(),
        onCancle: (hide, conf) => hide(),
        footBtn: [],
        list: [
          {show: false, name: "输入框", useComp: "datePicker", choseTime: "2019-04-28"},
          {show: false, name: "输入框", useComp: "drop"},
          {show: false, name: "出发日期", useComp: "drop", extendName: "2019-04-23", onClick: () => {console.log(45656)}},
          {show: false, name: "选项", useComp: "drop", extendName: "", type: "check", list: [
            {name: "123", id: "456", isActive: false}, {name: "234", id: "456", isActive: false},{name: "345", id: "456", isActive: false},
          ],
          onSelect: (item, list) => {
          }},
          {show: false, name: "选项", useComp: "checkbox", block: true, list: [
            {name: "123", id: "456", isActive: false}, {name: "234", id: "456", isActive: false},{name: "345", id: "456", isActive: false},
          ]},
          {show: false, name: "选项", useComp: "radio", block: true, list: [
            {name: "123", id: "456", isActive: false}, {name: "234", id: "456", isActive: false},{name: "345", id: "456", isActive: false},
            {name: "123", id: "456", isActive: false}, {name: "234", id: "456", isActive: false},{name: "345", id: "456", isActive: false},
          ]},
        ],
      },
    }
  },
  computed: {
  },
  mounted() {
  },
  methods: {
  },
  watch: {},
}
</script>

<style scoped>
  .config-manager {
    background-color: #fff;
    padding: 4px;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .config-manager-title {
    display: flex;
    border-left: 3px solid #0099cc;
    line-height: 30px;
    margin-bottom: 20px;
  }

  .config-manager-title > span {
    padding: 0 10px;
    font-size: 14px;
  }

  .config-manager-title > b {
    color: #ccc;
    font-size: 12px;
    font-weight: normal;
  }

  .config-manager-title > div {
    flex: 1 1 0;
    text-align: right;
  }

  .config-manager-title > div > span {
    display: inline-block;
    line-height: 24px;
    margin: 4px;
    background-color: #2870ba;
    color: #fff;
    padding: 0 20px;
    border-radius: 4px;
  }
</style>
